<!--
这是问卷库管理查看详情页面
-->
<template>
    <div id="main">
        <Header/>
        <div id="center">
            <div class="tab_top">
                <div class="tab">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">问卷调研</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$route.query.id}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="gobackbtn">
                    <el-button size="small" @click="$router.back()">返回</el-button>
                </div>
            </div>

            <div id="looker_center">
                    <h2 style="font-size: 0.25rem;margin-left: 0.3125rem;">{{this.$route.query.lookername}}</h2>
                    <p style="font-size: 0.15rem;margin-left: 0.3125rem;">为了准确掌握各位毕业生的就业状况和就业意向，请认真填写如下问卷!</p>

              <el-form
                v-for="(filter,index) in filterTableData"
                label-width="80px"
                style="width: 80%;
                padding: 10px 50px;"
                :key="index">

                <el-form-item style="width: 100%;" >
                  <div style="float: left">{{index+1}}. {{filter.subject}}</div>
                  <div style="float: left;color: #2396f5" v-if="filter.option_type == 1">【单选】</div>
                  <div style="float: left;color: #2396f5" v-else-if="filter.option_type == 2">【多选】</div>
                  <div style="float: left;color: #2396f5" v-else>【简答题】</div>

                </el-form-item>

                <el-form-item style="width: 100%;">
                  <el-form v-for="(option,index) in optionData" :key="index">
                    <el-radio-group
                      v-model="optionDatas"
                      v-if="filter.questionnaires_id == option.questionnaires_id && option.option_type == 1">
                      <el-radio
                        style="margin-right: 40px;"
                        :key="option.option_content"
                        :label="option.option_content">
                        {{option.option_content}}
                      </el-radio>
                    </el-radio-group>

                    <el-checkbox-group
                      v-model="optionDatas"
                      v-if="filter.questionnaires_id == option.questionnaires_id && option.option_type == 2">
                      <el-checkbox
                        style="margin-right: 40px;"
                        :key="option.option_content"
                        :label="option.option_content">
                        {{option.option_content}}
                      </el-checkbox>
                    </el-checkbox-group>

                    <el-input
                      v-if="filter.questionnaires_id == option.questionnaires_id && option.option_type == 3"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="option.option_content">
                    </el-input>
                  </el-form>
                </el-form-item>
              </el-form>


<!--                    <el-card class="box-card" shadow="never">-->
<!--                        <div class="radio-info">-->
<!--                            <span style="">1.{{ruleForm.item1}}</span><span style="color: #2396f5;">【单选】</span>-->
<!--                            <div>-->
<!--                                <el-radio v-model="radio" label="1" style="margin-left: 20px;">已就业</el-radio>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <el-radio v-model="radio" label="2" style="margin-left: 20px;">未就业</el-radio>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <el-radio v-model="radio" label="3" style="margin-left: 20px;">升学</el-radio>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <el-radio v-model="radio" label="4" style="margin-left: 20px;">其他</el-radio>-->
<!--                                <el-input v-model="ruleForm.item1infoother" size="mini" style="width: 69px;"></el-input>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </el-card>-->


<!--                    <el-card class="box-card" shadow="never" style="margin-top:20px">-->
<!--                        <div class="checkbox-info">-->
<!--                            <span style="">2.{{ruleForm.item2}}</span><span style="color: #2396f5;">【多选】</span>-->
<!--                            <el-checkbox-group v-model="ruleForm.item2info">-->
<!--                                <div>-->
<!--                                    <el-checkbox label="国有企业"></el-checkbox>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <el-checkbox label="三资企业"></el-checkbox>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <el-checkbox label="其他企业"></el-checkbox>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <el-checkbox label="高等教育单位"></el-checkbox>-->
<!--                                </div>-->
<!--                            </el-checkbox-group>-->
<!--                        </div>-->
<!--                    </el-card>-->


<!--                    <el-card class="box-card" shadow="never" style="margin-top:20px">-->
<!--                        <div class="checkbox-info">-->
<!--                            <span style="">2.{{ruleForm.item3}}</span>-->
<!--                            <el-input type="textarea" v-model="ruleForm.item3info" maxlength="1000" show-word-limit ></el-input>-->
<!--                        </div>-->
<!--                    </el-card>-->
            </div>
        </div>
    </div>
</template>
<script>
import Header from "../../../components/Header.vue"
import request from "../../../utils/request";
export default {
    created(){
        this.select()
    },
    data() {
        return {
            n:1,
            radio: '1',
            quest_invest_id:'',
            optionData:[],
            optionDatas:[],
            filterTableData:{},
            ruleForm: {
                item1: '你现在是否就业？',
                item1infoother: "出国",
                item2: '你的意向用人单位性质?',
                item2info:["高等教育单位"],
                item3: '你对于就业工作有什么建议?',
                item3info: "不知道怎么写简历，希望能看下学长学姐们优秀的简历...",

            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    components: {
        Header
    },
    methods: {
        select(){
            this.quest_invest_id = this.$route.query.quest_invest_id
            request.post("/topicoptions/selectTopicoptions?quest_invest_id="+this.quest_invest_id).then(res => {
                this.filterTableData = res;
            })
            request.post("/topicoptions/SelectAll").then(res => {
                this.optionData = res;
            })
        },
        newradio(){
            this.n++
        },
        newcheckbox(){
            this.n++
        },
        newtext(){
            this.n++
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>
<style>
#main {
    width: 19.1rem;
    height: 14rem;
    background: #EBEFF0;
}
#center{
    width: 12rem;
    height: 11.75rem;
    margin: 0 auto;
    background: #FFFFFF;
    margin-top: 0.4rem;
}
.tab_top{
    height: 0.64rem;
    border-bottom: solid 2px #f2f2f2;
}
.tab{
    float: left;
    margin-top: 25px;
    margin-left: 24px;
}
.gobackbtn{
    float: right;
    line-height: 0;
    margin-right: 20px;
}
.radio-info{
    font-size: 12px;
    font-weight: bold;
}
.radio-info div{
    margin-top: 22px;
}
.radio-info div:nth-child(6){
    margin-top: 0px;
}
.checkbox-info{
    font-size: 12px;
    font-weight: bold;
}
.checkbox-info div{
    margin-top: 22px;
}
textarea{
    min-height: 105.6px !important;
}
</style>
